<script lang="ts">
type ConfigType = 'filter';

type ItemType = { text: string; value: unknown };

type DataItem = {
  key: string;
  type?: 'select' | 'date'; // select=>选择项 date=>日期项
  title: string;
  items: ItemType[];
};

type OptionsType = DataItem[];

// 防抖
function debounce(fn: (type: SearchType, value: string) => void, wait = 0.5) {
  const delay = wait * 1000;
  let timer: Node.Timeout;
  return function (value: string) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, arguments), delay);
  };
}
</script>

<script lang="ts" setup>
import { ref } from 'vue';

import FilterPopup from '@/components/filter-popup/filter-popup.vue';

const props = defineProps<{
  data?: { title?: string; options?: OptionsType };
  config: { filter: boolean };
}>();

const emit = defineEmits<{
  (e: 'search', keyword: string): void;
  (e: 'confirm', value: Record<string, unknown>): void;
}>();

const filterPopupRef = ref();

const keyword = ref(''); // 搜索关键字

/**
 * 显示
 */
const handleShow = (type: ConfigType) => {
  switch (type) {
    case 'filter':
      filterPopupRef.value.handleShow();
      break;
  }
};

/**
 * 输入
 */
const handleInput = debounce((value: string) => {
  keyword.value = value;
  emit('search', value);
}, 0.4);

/**
 * 确认
 */
const handleConfirm = (type: ConfigType, data: Record<string, unknown>) => {
  switch (type) {
    case 'filter':
      emit('confirm', data);
      break;
  }
};
</script>

<template>
  <div class="search-bar">
    <slot name="left"> </slot>

    <div class="search">
      <img class="search__icon--search" src="@/assets/image/24767@2x.png" />

      <van-field
        class="search__input"
        v-bind="$attrs"
        v-model="keyword"
        clearable
        @input="(event: unknown) => handleInput(event.target.value as string)"
        @clear="() => handleInput('')"
      />
    </div>

    <slot name="right">
      <div
        class="filter"
        v-if="props.config.filter"
        @click="() => handleShow('filter')"
      >
        <img class="filter__icon" src="@/assets/image/24766@2x.png" />
      </div>
    </slot>

    <filter-popup
      v-if="props.config.filter"
      ref="filterPopupRef"
      :title="props.data!.title!"
      :data="props.data!.options!"
      @confirm="
        (value: Record<string, unknown>) => handleConfirm('filter', value)
      "
    ></filter-popup>
  </div>
</template>

<style lang="scss" scoped>
.search-bar {
  display: flex;
  padding: 6px 16px 6px;
  width: 100%;
  background-color: #fff;
}

.search {
  flex: 1;

  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 0 7px;
  align-items: center;
  padding: 0 12px;
  height: 32px;
  background-color: #fafafa;
  border-radius: 16px;
  border: 1px solid #dde0e5;

  &__input {
    padding: 0 !important;
    width: 100%;
    background-color: transparent !important;
    font-size: 12px !important;
    color: #333333;
  }

  &__icon--search {
    width: 16px;
    height: 16px;
  }
}

.filter {
  display: flex;
  align-items: center;
  margin-left: 10px;

  &__icon {
    width: 20px;
    height: 20px;
  }
}
</style>
